<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getrepairAPI } from '@/api/search/index'

const props = defineProps({
  id: { type: String, required: true }
})

const measures = ref([])
const schemes = ref([])

const getInfo = (id: string) => {
  getrepairAPI(id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      schemes.value = data.schemes
      measures.value = data.measures
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <!-- <div class="title">修复方案与缓解措施</div> -->
  <div class="card">
    <div class="header">官方修复方案</div>
    <div class="content">
      <div class="item" v-for="(item,index) in schemes" :key="index">
        <div class="title">方案{{index+1}}</div>
        <div class="desc">
          <p>{{item.name}}</p>
          <p>来源：{{item.source}}</p>
          <jm-link :href="item.url">
            {{item.url}}
          </jm-link>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="card">
    <div class="header">临时缓解措施</div>
    <div class="content">
      <ul v-for="(item,index) in measures" :key="index">
        <li>{{item}}</li>
      </ul>
    </div>
  </div> -->
</template>
<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
}
.title {
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.card {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
  .header {
    padding: 0.625rem 1.875rem;
    background: var(--el-color-info-light-8);
  }
  .content {
    padding: 1.875rem;
    background: var(--el-color-info-light-9);
    .item {
      margin-bottom: 1.25rem;
      .desc {
        p {
          margin-bottom: 0.625rem;
        }
      }
    }
  }
}
</style>
